<template>
  <div>
    <div>
    <img src="../assets/答题页面--对＆规则介绍页面.png" alt="" v-if="rightShow" style="height: 400px; width: 300px;">
    <img src="../assets/答题页面--错.png" alt="" v-if="wrongShow" style="height: 400px; width: 300px;">
  </div>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>题目</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="preQuestion">上一题  </el-button>
  </div>
  <div class="text item" >
    <div>
      <div v-for="(content, index) in questionArr" :key="index" v-show="indexNum === index">
          <h2>{{ content.title }}</h2>
          <p>{{ content.content }}</p>
        </div>
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="答题区域" prop="pass">
        <el-input v-model="ruleForm.pass" autocomplete="off" id="question"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Judge">确定</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</el-card>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入答案'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
    return {
      textarea: '',
      rightShow:false,
      wrongShow:false,
      indexNum:0,
      currentNum:0,
      questionArr: [
        { title: '这是第一题', content: '1 + 1 = ？' },
        { title: '这是第二题', content: '1 + 2 = ？' },
        { title: '这是第三题', content: '1 + 3 = ？' },
      ],
      answerArr: ['2','3','4'],
      ruleForm: {
          pass: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
    }
  },
  methods: {
      Judge(){
        if(this.ruleForm.pass === this.answerArr[this.indexNum]){
          // alert('666')
          this.rightShow = true
          this.wrongShow = false
          setTimeout(() => {
            // this.$router.push('./question2')
            if(this.indexNum < this.answerArr.length - 1){
              this.rightShow = false
              this.ruleForm.pass = ''
              this.indexNum++
            }else{
              // alert('666')
              this.$router.push('/end')
            }
          },2000)
        }else{
          // alert('回答错误')
          this.ruleForm.pass = ''
          this.rightShow = false
          this.wrongShow = true
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      preQuestion(){
        if(this.indexNum > 0){
          this.indexNum--
          this.wrongShow = false
        }else{
          alert("已经是第一题了")
        }
      },
      // saveIndex(index){
      //   this.indexNum = index
      // }
    },
  //   created(){
  //     if(sessionStorage.indexNum){
  //       this.indexNum = Number(sessionStorage.indexNum)
  //     }
  //   },
  //   mounted(){
  //     const saveIndex = sessionStorage.getItem('indexNum')
  //     if(this.indexNum > 0){
  //       this.indexNum = parseInt(saveIndex)
  //     }
  //   },
  //   beforeUnmount() {
  //   // 将当前索引值存储到本地存储中
  //   localStorage.setItem("indexNum", this.indexNum.toString());
  // },
}
</script>

<style lang="less" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    height: 500px;
    text-align: center;
    position: fixed;
    top: 30%;
    left: 30%;
  }
</style>